<template>
  <div>
    <!-- 对话框(地图) -->
    <el-dialog
      :title="mapToolsTitle"
      width="100%"
      class="mapTools-dialog"
      :visible="mapToolsOpen"
      @close="$emit('close-dialog')"
      v-dialogDrag
      append-to-body
    >

      <el-input style="width: 100px" v-show="false" readonly   v-model="currentValue"></el-input>
      
      <MapTools
        :mapColumn="mapColumn"
        :mapColumnType="mapColumnType"
        :mapColumnValue="mapColumnValue"
        :center="center"
        :geomValue="mapGeomInfo"
        @drawEnd="handledrawEnd"
      ></MapTools>
    </el-dialog>
  </div>
</template>
<script >
import MapTools from "/@/components/MapTools/index.vue";
export default {
  name: "mapLonlat",
  mapToolsTitle: "",
  mapColumnValue: null,
  mapColumn: null,
  mapColumnType: null,
  components: {
    MapTools,
  },
  data() {
    return {
      currentValue: "",
      center: null,
      curCenter: "",
      geomValue: null,
    };
  },
  props: {
    value: {
      type: String,
      required: false,
    },
    mapToolsOpen: {
      type: Boolean,
      default: false,
    },
    mapToolsTitle: {
      type: String,
      default: null,
    },
    mapColumnValue: {
      type: String,
      default: null,
    },
    mapColumn: {
      type: String,
      default: null,
    },
    mapColumnType: {
      type: String,
      default: null,
    },
    mapGeomInfo: {
      type: String,
      default: null,
    }
  },

  methods: {
    handledrawEnd(value) {
      this.currentValue = value;

      this.$emit('getMapLonlatEnd',value);//给父组件赋值
      console.log("获取中心点坐标:" + value);
      
    },
    setValue(value) {
      // 在这里对 传入的value值做处理
      this.currentValue = value;
    },
  },

  watch: {
    value(value) {
      
    },
    curCenter(value) {
      console.log("手动获取坐标值:" + value);
      
    },
    mapGeomInfo(value){
      console.log("当前信息的坐标数据:" + value);
    }
  },
  mounted() {
    console.log("从表单获取mapGeomInfo:" + this.mapGeomInfo);
  }
};
</script>
<style lang="less">
.mapTools-dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    top: 15px;
    left: 0;
    right: 0;
    bottom: 15px;
    height: calc(~"100% - 15px");
    .el-dialog__header {
      // padding-bottom: 30px;
    }
    .el-dialog__body {
      width: 100%;
      overflow: hidden;
      overflow-y: auto;
      height: calc(~"100% - 2.8rem"); //最大高度为视口高度的90%
      padding: 0;
      margin: 0;
      z-index: 1;
    }
  }
}
</style>  